<template>
  <div class="topBar">
    <div class="logo">
      <i class="iconfont icon-netease-cloud-music-fill"></i>
      <span>音乐播放器</span>
    </div>
    <div class="search">
      <div class="toBack">
        <a href="javascript:void(0)" @click="togBack"><i class="el-icon-arrow-left"></i></a>
        <a :class="status === false ? status : ''" href="javascript:void(0)" @click="toGo"><i class="el-icon-arrow-right"></i></a>
      </div>
      <!-- suffix-icon="el-icon-search" -->
      <el-input placeholder="搜索音乐, 视频, 歌词, 电台" v-model="inputValue" size="mini" clearable>
        <el-button slot="append" icon="el-icon-search" size="mini" @click="search"></el-button>
      </el-input>
    </div>
    <div class="user_info">
      <el-avatar :src="UserImg" size="medium"></el-avatar>
      <span v-if="currentUserInfo">{{currentUserInfo.nickname}}</span>
      <span v-else @click="loginDialogVisible = true">未登录</span>
      <el-button type="infor" size="small" v-if="currentUserInfo" @click="logout">退出</el-button>
    </div>

    <!-- 登录对话框 -->
    <el-dialog title="登录" :visible.sync="loginDialogVisible" width="20%" @close="loginDialogClosed" modal :append-to-body="true">
      <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef" class="demo-ruleForm">
        <el-form-item prop="phone">
          <el-input v-model="loginForm.phone" placeholder="请输入手机号" prefix-icon="iconfont icon-phone"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" prefix-icon="iconfont icon-password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmLogin">登录</el-button>
          <el-button type="infor" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getPhoneLogin, getPhoneLoginOut, getUserSonglist } from '../../network/login.js'
export default {
  data () {
    return {
      status: false,
      // 搜索框内容
      inputValue: '',
      // 默认头像地址
      UserImg: require('../../assets/images/logo.png'),
      currentUserInfo: window.localStorage.getItem('currentUserInfo') === 'null' ? null : JSON.parse(window.localStorage.getItem('currentUserInfo')),
      // 控制登录对话框的显示与隐藏
      loginDialogVisible: false,
      loginForm: {
        phone: '18827794720',
        password: '13578101200hai'
      },
      // 登录表单验证规则对象
      loginRules: {
        // 验证用户名是否合法
        phone: [{
          required: true,
          message: '请输入手机号码',
          trigger: 'blur'
        },
        {
          lenght: 11,
          message: '长度为11个字符',
          trigger: 'blur'
        }
        ],
        // 验证密码是否合法
        password: [{
          required: true,
          message: '请输入登录密码',
          trigger: 'blur'
        },
        {
          min: 6,
          max: 15,
          message: '长度在 6 到 15 个字符',
          trigger: 'blur'
        }
        ]
      }
    }
  },
  methods: {
    // 返回
    togBack () {
      this.$router.go(-1)
    },
    toGo () {
      if (history.forward()) {
        this.$router.go(1)
      } else {
        this.status = true
      }
    },
    // 跳转搜索结果页面
    search () {
      // console.log(this.inputValue)
      if (this.inputValue === '') {
        return
      }
      // console.log(this.inputValue)
      this.$router.push('/search/' + this.inputValue)
      // this.inputValue = ''
    },
    // 重置登录表单
    loginDialogClosed () {
      this.$refs.loginFormRef.resetFields()
    },
    resetLoginForm () {
      this.$refs.loginFormRef.resetFields()
    },
    // 获取用户歌单
    async getUserSonglist (uid) {
      // 获取用户歌单信息
      const { data: res } = await getUserSonglist(this.currentUserInfo.userId)
      console.log(res)
      this.$store.commit('userSongslist', res.playlist)
    },
    // 确认登录
    confirmLogin () {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await getPhoneLogin(this.loginForm)
        console.log(res)
        if (res.code !== 200) {
          return this.$message.error('登录失败！')
        }
        window.localStorage.setItem('currentUserInfo', JSON.stringify(res.profile))
        // 放入用户的信息 图片 登录框禁止 提示
        this.currentUserInfo = res.profile
        this.UserImg = this.currentUserInfo.avatarUrl
        this.loginDialogVisible = false
        this.getUserSonglist(this.currentUserInfo.userId)
        this.$message.success('登录成功！')
      })
    },
    // 退出登录
    async logout () {
      const { data: res } = await getPhoneLoginOut()
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error('退出登录失败！')
      }
      this.currentUserInfo = null
      window.localStorage.setItem('currentUserInfo', null)
      this.UserImg = require('../../assets/images/logo.png')
    }
  },
  async created () {
    if (this.currentUserInfo) {
      this.UserImg = this.currentUserInfo.avatarUrl
      await getUserSonglist(this.currentUserInfo.userId)
    }
  }
}
</script>

<style lang="less" scoped>
  .status {
    color: #e1e1e2!important;
  }
  .topBar {
    width: 100%;
    height: 7%;
    // padding: 10px 0;
    background-color: #51aef9;
    // background-color: #222225;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
    .logo {
      color: #fff;
      display: flex;
      align-items: center;
      margin-left: 20px;
      letter-spacing: 2px;
      i {
        font-size: 30px;
      }
      span {
        margin-left: 5px;
      }
    }

    .search {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: absolute;
      left: 20%;
      .toBack {
        display: flex;
        flex-direction: row;
        margin-right: 15px;
        i {
          font-size: 20px;
          color: #fff;
        }
      }
    }

    .user_info {
      color: #fff;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-right: 50px;
      cursor: pointer;
      span {
        margin: 0 15px 0 0;
        font-size: 18px;
        letter-spacing: 1px
      }
      .el-button {
        color: #fff;
        margin-right: 10px;
        background-color: #5292fe;
        border: none;
        font-size: 18px;
      }
    }
  }
</style>

<style>
  .search .el-input__inner {
    width: 300px;
    height: 35px!important;
    line-height: 35px;
    border-style: none;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
    font-size: 16px;
    background-color: rgba(255,255,255,0.7);
  }
  .el-icon-search {
    padding-top: 5px;
    padding-right: 5px;
    font-size: 20px;
    color: #fff!important;
  }
  .el-input-group__append {
    background-color: #cbe7fd!important;
    border-top-right-radius: 18px!important;
    border-bottom-right-radius: 18px!important;
  }
</style>
